<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>公司差旅系统</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/myStyle.css">
	<link rel="stylesheet" href="cropper-master/dist/cropper.css">
</head>
<body style="background-image: url(img/registPic.jpg);background-size: cover;">
	<div class="container-fluid regist">
		<div class="row">
			<div class="col-md-6 col-md-offset-1 registstyle" style="color: #ffffff;min-height: 360px;">
				<div class="row">
					<div class="col-md-12">
						<h3>填写注册信息</h3>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label for="userid">员工ID</label>
							<input type="text" placeholder="员工ID" id="userid" class="form-control">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="username">员工姓名</label>
							<input type="text" placeholder="员工姓名" id="username" class="form-control">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-5">
						<div class="form-group">
							<label for="userpersonid">身份证号</label>
							<input type="text" placeholder="身份证号" id="userpersonid" class="form-control">
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="userdepart">所属部门</label>
							<select name="userdepart" id="userdepart" class="form-control">
								<option value="0">总经理办公室</option>
								<option value="1">人力资源部</option>
								<option value="2">财务部</option>
								<option value="3">生产技术部</option>
								<option value="4">计划营销部</option>
								<option value="5">安全监察部</option>
								<option value="6">党群工作部</option>
								<option value="7">工会办公室</option>
								<option value="8">保卫部</option>
								<option value="9">后勤部</option>
							</select>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label for="userposition">员工职位</label>
							<input type="text" placeholder="员工职位" id="userposition" class="form-control">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label for="userphone">员工手机</label>
							<input type="text" id="userphone" class="form-control" placeholder="员工手机">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="useremail">员工邮箱</label>
							<input type="mail" placeholder="员工邮箱" id="useremail" class="form-control">
						</div>
					</div>
				</div><!--基本信息-->
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="form-group">
							<button class="btn btn-default" id="submit" name="submit">提交信息</button>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 registstyle">
				<div class="row">
					<div class="col-md-12">
						<h3 style="color: #ffffff;">
							上传用户头像（可选）
						</h3>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div>
							<img src="img/testPic.jpg" alt="" id="image">
						</div>
					</div>
				</div>
				<div class="row" style="margin: 10px;">
					<div class="col-md-12 text-center">
						<button id="upload" class="btn btn-default">上传图片</button>
					</div>
				</div>
			</div><!--头像信息-->
		</div>
	</div><!--员工基本信息-->
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="cropper-master/dist/cropper.js"></script>
	<script>
		$(document).ready(function(){
			$("#image").cropper({aspectRatio: 1/1,crop:function(e){
				console.log(e.x);
    			console.log(e.y);
    			console.log(e.width);
    			console.log(e.height);
    			console.log(e.rotate);
    			console.log(e.scaleX);
    			console.log(e.scaleY);
			}});
		});
	</script>
</body>
</html>